<#assign pageTitle="${channel.channelName}_${siteCompany.siteName!}"/>
<#assign pageKeywords = pageTitle />
<#assign pageDescription = pageTitle />
<#assign pageHeader>
    <link rel="stylesheet" type="text/css" href="/static/h5/css/course.css?20220210"/>
</#assign>
<#assign pageContent>
    <div class="course-header">
        <div class="header-menu">
            <a href="/h5/course/index.html">基础</a>
            <a href="/h5/course/family.html">家庭</a>
            <a class="active">职业</a>
            <a href="/h5/course/quality.html">素质</a>
        </div>
        <div class="filter-btn" @click="clickFilter">
            <van-icon name="filter-o"></van-icon>
            筛选
        </div>
    </div>
    <div class="banner-item">
        <van-swipe class="banner-swipe" :autoplay="4000" lazy-render>
            <van-swipe-item v-for="(item,index) in banner">
                <a :href="imgUrl+item.linkAddress">
                    <img :src="item.imagesUrl"/>
                </a>
            </van-swipe-item>
        </van-swipe>
    </div>
    <div class="main-item">
        <div class="box-title">
            <div class="title-name">建筑类</div>
            <div class="title-more" @click="top1PageClick">
                <van-icon name="replay"></van-icon>
                换一批
            </div>
        </div>
        <div class="course-list">
            <a v-for="item in top1" :href="'/h5/course/view/'+item.courseId+'.html'">
                <div class="course-pic"><img :src="item.cover" alt=""></div>
                <div class="course-info">
                    <div class="course-name text-two">{{item.courseName}}</div>
                    <div class="course-time">共{{item.lessonNum}}课时</div>
                </div>
                <div class="course-price" v-if="item.price > 0">¥{{item.price/100}}</div>
                <div class="course-price" v-if="item.price == 0">免费</div>
            </a>
        </div>
    </div>
    <div class="main-item">
        <div class="box-title">
            <div class="title-name">金融类</div>
            <div class="title-more" @click="top2PageClick">
                <van-icon name="replay"></van-icon>
                换一批
            </div>
        </div>
        <div class="course-list">
            <a v-for="item in top2" :href="'/h5/course/view/'+item.courseId+'.html'">
                <div class="course-pic"><img :src="item.cover" alt=""></div>
                <div class="course-info">
                    <div class="course-name text-two">{{item.courseName}}</div>
                    <div class="course-time">共{{item.lessonNum}}课时</div>
                </div>
                <div class="course-price" v-if="item.price > 0">¥{{item.price/100}}</div>
                <div class="course-price" v-if="item.price == 0">免费</div>
            </a>
        </div>
    </div>
    <div class="main-item">
        <div class="box-title">
            <div class="title-name">财会类</div>
            <div class="title-more" @click="top3PageClick">
                <van-icon name="replay"></van-icon>
                换一批
            </div>
        </div>
        <div class="course-list">
            <a v-for="item in top3" :href="'/h5/course/view/'+item.courseId+'.html'">
                <div class="course-pic"><img :src="item.cover" alt=""></div>
                <div class="course-info">
                    <div class="course-name text-two">{{item.courseName}}</div>
                    <div class="course-time">共{{item.lessonNum}}课时</div>
                </div>
                <div class="course-price" v-if="item.price > 0">¥{{item.price/100}}</div>
                <div class="course-price" v-if="item.price == 0">免费</div>
            </a>
        </div>
    </div>
    <van-popup v-model="showFilter" position="right"  closeable :style="{height:'100%', width: '90%' }">
        <div class="condition-box">
            <div class="condition-title-box">
                基础教育
            </div>
            <div class="condition-content">
                <div class="condition-btn">教师专业技能</div>
                <div class="condition-btn">专业发展规划</div>
                <div class="condition-btn">专业知识学习</div>
                <div class="condition-btn">专业实践研究</div>
                <div class="condition-btn">班主任提升</div>
                <div class="condition-btn">班集体建设</div>
                <div class="condition-btn">班级活动组织</div>
                <div class="condition-btn">学生发展</div>
                <div class="condition-btn">沟通合作</div>
                <div class="condition-btn">校长领导力</div>
            </div>
        </div>
        <div class="condition-box">
            <div class="condition-title-box">
                家庭教育
            </div>
            <div class="condition-content">
                <div class="condition-btn">亲子关系</div>
                <div class="condition-btn">心理健康</div>
                <div class="condition-btn">青少年成长</div>
            </div>
        </div>
        <div class="condition-box">
            <div class="condition-title-box">
                素质教育
            </div>
            <div class="condition-content">
                <div class="condition-btn">音乐课程</div>
                <div class="condition-btn">体育课程</div>
                <div class="condition-btn">美术课程</div>
            </div>
        </div>
        <div class="condition-box">
            <div class="condition-title-box">
                职业教育
            </div>
            <div class="condition-content">
                <div class="condition-btn">建筑类</div>
                <div class="condition-btn">金融类</div>
                <div class="condition-btn">财会类</div>
                <div class="condition-btn">人力资源</div>
                <div class="condition-btn">教师资格证</div>
                <div class="condition-btn">法律职业培训</div>
            </div>
        </div>
    </van-popup>
</#assign>
<#assign pageScript>
    <script src="/static/h5/js/format.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    showFooter: true,
                    activeTab: 2,//底部菜单选中项
                    imgUrl: '/h5',
                    banner: [],
                    top1: [],//建筑
                    top2: [],//金融
                    top3: [],//财会
                    dtList: [],
                    dtLoading: false,
                    dtFinished: false,
                    dtRefreshing: false,
                    top1Page: 1,
                    top2Page: 1,
                    top3Page: 1,
                    error: false,
                    limit: 10,
                    showList: false,
                    emptyArticle: false,
                    showFilter:false
                }
            },
            created() {
                let that = this;
                that.bannerList();
                that.top1Course();
                that.top2Course();
                that.top3Course();
            },
            methods: {
                clickFilter() {
                    let that = this;
                    that.showFilter = true;
                },
                onRefreshDt() {
                    // 重新加载数据
                    this.dtRefreshing = true;
                    this.onLoadDt();
                },
                toView(id) {
                    window.location.href = '/h5/article/view/' + id + '.html';
                },
                bannerList() {//获取banner图
                    var that = this;
                    axios.get('/ajax/advert/list.json', {
                        params: {
                            page: 1, limit: 10, channelId: 8, typeId: 1
                        }
                    }).then(function (json) {
                        if (json.data.code === 0) {
                            that.banner = json.data.data;
                        } else {
                            console.log(json.data.msg);
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                top1Course() {//建筑
                    var that = this;
                    axios.get('/api/course/list.json', {
                        params: {
                            page: this.top1Page, limit: 5, channelId: 8, categoryId: 12, sellType: "COURSE"
                        }
                    }).then(function (json) {
                        if (json.data.code === 0) {
                            if(json.data.data.page > 1 && json.data.data.courseList.length == 0){
                                that.top1Page = 0;
                                that.top1PageClick();
                            }else {
                                that.top1 = json.data.data.courseList;
                            }
                        } else {
                            console.log(json.data.msg);
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                top1PageClick(){
                    this.top1Page++;
                    this.top1Course();
                },
                top2Course() {//金融
                    var that = this;
                    axios.get('/api/course/list.json', {
                        params: {
                            page: this.top2Page, limit: 5, channelId: 8, categoryId: 16, sellType: "COURSE"
                        }
                    }).then(function (json) {
                        if (json.data.code === 0) {
                            if(json.data.data.page > 1 && json.data.data.courseList.length == 0){
                                that.top2Page = 0;
                                that.top2PageClick();
                            }else {
                                that.top2 = json.data.data.courseList;
                            }
                        } else {
                            console.log(json.data.msg);
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                top2PageClick(){
                    this.top2Page++;
                    this.top2Course();
                },
                top3Course() {//财会
                    var that = this;
                    axios.get('/api/course/list.json', {
                        params: {
                            page: this.top3Page, limit: 5, channelId: 8, categoryId: 21, sellType: "COURSE"
                        }
                    }).then(function (json) {
                        if (json.data.code === 0) {
                            if(json.data.data.page > 1 && json.data.data.courseList.length == 0){
                                that.top3Page = 0;
                                that.top3PageClick();
                            }else {
                                that.top3 = json.data.data.courseList;
                            }
                        } else {
                            console.log(json.data.msg);
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                top3PageClick(){
                    this.top3Page++;
                    this.top3Course();
                }
            },
        })
    </script>
</#assign>
<#include "../layout_h5.ftl" />